<template>
  <div class="home-container">
    <!-- Header -->
    <header class="header">
      <div class="header-left">
        <h1 class="system-title">新闻管理后台系统</h1>
      </div>
      <div class="header-right">
        <el-dropdown>
          <span class="welcome-text">
            <el-avatar :size="30" :src="userAvatar" class="user-avatar"></el-avatar>
            {{ username }}
            <el-icon class="el-icon--right"><arrow-down /></el-icon>
          </span>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item @click="showUserProfile">个人中心</el-dropdown-item>
              <el-dropdown-item @click="handleLogout">退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
        <!-- <el-badge :value="unreadNotifications" class="notification-badge" v-if="unreadNotifications > 0">
          <el-button circle @click="showNotifications">
            <el-icon><bell /></el-icon>
          </el-button>
        </el-badge> -->
      </div>
    </header>

    <!-- Main Content -->
    <div class="main-content">
      
      <!-- Sidebar -->
      <aside class="sidebar">
        <el-menu
          :default-active="route.path"
          class="nav-menu"
          background-color="#001529"
          text-color="rgba(255, 255, 255, 0.65)"
          active-text-color="#ffffff"
          :router="true"
        >

          <el-menu-item index="/dashboard">
            <el-icon><odometer /></el-icon>
            <span>控制台</span>
          </el-menu-item>
          
          <!-- 内容管理 -->
          <el-sub-menu index="1" v-if="hasPermission(['content', 'categories', 'tag', 'comment', 'mediaResources','contentModeration'])">
            <template #title>
              <el-icon><document /></el-icon>
              <span>内容管理</span>
            </template>
            <el-menu-item index="/content" v-if="hasPermission(['content'])">文章管理</el-menu-item>
            <el-menu-item index="/categories" v-if="hasPermission(['categories'])">分类管理</el-menu-item>
            <el-menu-item index="/tag" v-if="hasPermission(['tag'])">标签管理</el-menu-item>
            <el-menu-item index="/comment" v-if="hasPermission(['comment'])">评论管理</el-menu-item>
            <el-menu-item index="/mediaResources" v-if="hasPermission(['mediaResources'])">媒体资源管理</el-menu-item>
            <el-menu-item index="/contentModeration" v-if="hasPermission(['contentModeration'])">内容审核</el-menu-item>
          </el-sub-menu>
          
          <!-- 用户管理 -->
          <el-sub-menu index="2" v-if="hasPermission(['user', 'role', 'userBehaviors', 'userFollows'])">
            <template #title>
              <el-icon><user /></el-icon>
              <span>用户管理</span>
            </template>
            <el-menu-item index="/user" v-if="hasPermission(['user'])">用户列表</el-menu-item>
            <el-menu-item index="/role" v-if="hasPermission(['role'])">用户组/角色</el-menu-item>
            <el-menu-item index="/userBehaviors" v-if="hasPermission(['userBehaviors'])">用户行为分析</el-menu-item>
            <el-menu-item index="/userFollows" v-if="hasPermission(['userFollows'])">关注关系</el-menu-item>
          </el-sub-menu>
          
          <!-- 广告管理 -->
          <el-sub-menu index="3" v-if="hasPermission(['advertisers', 'adCampaigns', 'adCreatives', 'adImpressions', 'adEffect'])">
            <template #title>
              <el-icon><data-line /></el-icon>
              <span>广告管理</span>
            </template>
            <el-menu-item index="/advertisers" v-if="hasPermission(['advertisers'])">广告主管理</el-menu-item>
            <el-menu-item index="/adCampaigns" v-if="hasPermission(['adCampaigns'])">广告计划</el-menu-item>
            <el-menu-item index="/adCreatives" v-if="hasPermission(['adCreatives'])">广告创意</el-menu-item>
            <el-menu-item index="/adImpressions" v-if="hasPermission(['adImpressions'])">广告投放统计</el-menu-item>
            <el-menu-item index="/adEffect" v-if="hasPermission(['adEffect'])">广告效果分析</el-menu-item>
          </el-sub-menu>
          
          <!-- 数据统计 -->
          <el-sub-menu index="4" v-if="hasPermission(['contentPerformanceDaily', 'userRetentionStats', 'adPerformanceDaily', 'systemOperationDaily'])">
            <template #title>
              <el-icon><data-line /></el-icon>
              <span>数据统计</span>
            </template>
            <el-menu-item index="/contentPerformanceDaily" v-if="hasPermission(['contentPerformanceDaily'])">内容表现统计</el-menu-item>
            <el-menu-item index="/userRetentionStats" v-if="hasPermission(['userRetentionStats'])">用户活跃度</el-menu-item>
            <el-menu-item index="/adPerformanceDaily" v-if="hasPermission(['adPerformanceDaily'])">广告效果报表</el-menu-item>
            <el-menu-item index="/systemOperationDaily" v-if="hasPermission(['systemOperationDaily'])">系统运营数据</el-menu-item>
          </el-sub-menu>
          
          <!-- 系统设置 -->
          <el-sub-menu index="5" v-if="hasPermission(['baseDicts', 'sysOperationLog'])">
            <template #title>
              <el-icon><setting /></el-icon>
              <span>系统设置</span>
            </template>
            <el-menu-item index="/baseDicts" v-if="hasPermission(['baseDicts'])">基础字典</el-menu-item>
            <el-menu-item index="/sysOperationLog" v-if="hasPermission(['sysOperationLog'])">操作日志</el-menu-item>
          </el-sub-menu>
        </el-menu>
      </aside>
      
      <!-- Content Area -->
      <main class="content">
        <div class="breadcrumb" v-if="$route.path !== '/dashboard'">
          <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/dashboard' }"></el-breadcrumb-item>
            <el-breadcrumb-item v-for="(item, index) in breadcrumbList" :key="index">
           {{ item }}
            </el-breadcrumb-item>
          </el-breadcrumb>
        </div>
        
        <!-- 控制台内容 -->
        <div v-if="$route.path === '/dashboard'" class="dashboard-container">
          <!-- 数据概览卡片 -->
          <div class="overview-cards">
            <el-row :gutter="20">
              <el-col :span="6">
                <el-card shadow="hover" class="stat-card">
                  <div class="card-content">
                    <div class="stat-icon user-icon">
                      <el-icon><user /></el-icon>
                    </div>
                    <div class="stat-info">
                      <div class="stat-title">用户总数</div>
                      <div class="stat-value">{{ dashboardData.userCount }}</div>
                      <div class="stat-trend">
                        <span :class="dashboardData.userTrend >= 0 ? 'up' : 'down'">
                          {{ dashboardData.userTrend >= 0 ? '↑' : '↓' }} {{ Math.abs(dashboardData.userTrend) }}%
                        </span>
                        较上月
                      </div>
                    </div>
                  </div>
                </el-card>
              </el-col>
              <el-col :span="6">
                <el-card shadow="hover" class="stat-card">
                  <div class="card-content">
                    <div class="stat-icon news-icon">
                      <el-icon><document /></el-icon>
                    </div>
                    <div class="stat-info">
                      <div class="stat-title">新闻总数</div>
                      <div class="stat-value">{{ dashboardData.newsCount }}</div>
                      <div class="stat-trend">
                        <span :class="dashboardData.newsTrend >= 0 ? 'up' : 'down'">
                          {{ dashboardData.newsTrend >= 0 ? '↑' : '↓' }} {{ Math.abs(dashboardData.newsTrend) }}%
                        </span>
                        较上月
                      </div>
                    </div>
                  </div>
                </el-card>
              </el-col>
              <el-col :span="6">
                <el-card shadow="hover" class="stat-card">
                  <div class="card-content">
                    <div class="stat-icon comment-icon">
                      <el-icon><chat-dot-round /></el-icon>
                    </div>
                    <div class="stat-info">
                      <div class="stat-title">评论总数</div>
                      <div class="stat-value">{{ dashboardData.commentCount }}</div>
                      <div class="stat-trend">
                        <span :class="dashboardData.commentTrend >= 0 ? 'up' : 'down'">
                          {{ dashboardData.commentTrend >= 0 ? '↑' : '↓' }} {{ Math.abs(dashboardData.commentTrend) }}%
                        </span>
                        较上月
                      </div>
                    </div>
                  </div>
                </el-card>
              </el-col>
              <el-col :span="6">
                <el-card shadow="hover" class="stat-card">
                  <div class="card-content">
                    <div class="stat-icon ad-icon">
                      <el-icon><data-line /></el-icon>
                    </div>
                    <div class="stat-info">
                      <div class="stat-title">广告总数</div>
                      <div class="stat-value">{{ dashboardData.adCount }}</div>
                      <div class="stat-trend">
                        <span :class="dashboardData.adTrend >= 0 ? 'up' : 'down'">
                          {{ dashboardData.adTrend >= 0 ? '↑' : '↓' }} {{ Math.abs(dashboardData.adTrend) }}%
                        </span>
                        较上月
                      </div>
                    </div>
                  </div>
                </el-card>
              </el-col>
            </el-row>
          </div>
          
          <!-- 图表和任务区域 -->
          <div class="chart-task-area">
            <el-row :gutter="20">
              <!-- 数据图表 -->
              <el-col :span="16">
                <el-card shadow="hover" class="chart-card">
                  <template #header>
                    <div class="card-header">
                      <span>数据趋势</span>
                      <el-select v-model="chartTimeRange" size="small" style="width: 120px">
                        <el-option label="最近7天" value="7"></el-option>
                        <el-option label="最近30天" value="30"></el-option>
                        <el-option label="最近90天" value="90"></el-option>
                      </el-select>
                    </div>
                  </template>
                  <div id="main-chart" style="height: 300px;"></div>
                </el-card>
              </el-col>
              
              <!-- 近期任务 -->
              <el-col :span="8">
                <el-card shadow="hover" class="task-card">
                  <template #header>
                    <div class="card-header">
                      <span>近期审核任务</span>
                      <el-button type="text" @click="refreshTasks">刷新</el-button>
                    </div>
                  </template>
                  <div class="task-list">
                    <div v-for="(task, index) in pendingTasks" :key="index" class="task-item">
                      <div class="task-info">
                        <div class="task-title">{{ task.title }}</div>
                        <div class="task-meta">
                          <span class="task-author">{{ task.author }}</span>
                          <span class="task-time">{{ task.time }}</span>
                        </div>
                      </div>
                      <div class="task-actions">
                        <el-button size="small" type="success" @click="approveTask(task.id)">通过</el-button>
                        <el-button size="small" type="danger" @click="rejectTask(task.id)">拒绝</el-button>
                      </div>
                    </div>
                    <el-empty v-if="pendingTasks.length === 0" description="暂无待审核任务"></el-empty>
                  </div>
                </el-card>
              </el-col>
            </el-row>
          </div>
          
          <!-- 系统通知和快捷操作 -->
          <div class="notice-quick-area">
            <el-row :gutter="20">
              <!-- 系统通知 -->
              <el-col :span="12">
                <el-card shadow="hover" class="notice-card">
                  <template #header>
                    <div class="card-header">
                      <span>系统通知</span>
                      <el-button type="text" @click="markAllAsRead">全部已读</el-button>
                    </div>
                  </template>
                  <div class="notice-list">
                    <div v-for="(notice, index) in systemNotices" :key="index" 
                         class="notice-item" :class="{unread: !notice.read}">
                      <div class="notice-icon">
                        <el-icon :color="notice.type === 'warning' ? '#e6a23c' : notice.type === 'error' ? '#f56c6c' : '#67c23a'">
                          <component :is="notice.icon"></component>
                        </el-icon>
                      </div>
                      <div class="notice-content">
                        <div class="notice-title">{{ notice.title }}</div>
                        <div class="notice-desc">{{ notice.description }}</div>
                        <div class="notice-time">{{ notice.time }}</div>
                      </div>
                    </div>
                    <el-empty v-if="systemNotices.length === 0" description="暂无系统通知"></el-empty>
                  </div>
                </el-card>
              </el-col>
              
              <!-- 快捷操作 -->
              <el-col :span="12">
                <el-card shadow="hover" class="quick-card">
                  <template #header>
                    <div class="card-header">
                      <span>快捷操作</span>
                    </div>
                  </template>
                  <div class="quick-actions">
                    <el-row :gutter="20">
                      <el-col :span="8" v-for="(action, index) in quickActions" :key="index">
                        <div class="quick-action-item" @click="handleQuickAction(action.path)">
                          <div class="action-icon">
                            <el-icon :size="30" :color="action.color">
                              <component :is="action.icon"></component>
                            </el-icon>
                          </div>
                          <div class="action-title">{{ action.title }}</div>
                        </div>
                      </el-col>
                    </el-row>
                  </div>
                </el-card>
              </el-col>
            </el-row>
          </div>
        </div>
        
        <!-- 路由视图 -->
        <router-view v-else></router-view>
      </main>
    </div>
    
    <!-- 通知抽屉 -->
    <el-drawer v-model="notificationDrawer" title="通知中心" size="30%">
      <div class="notification-container">
        <el-tabs v-model="notificationTab">
          <el-tab-pane label="系统通知" name="system">
            <div v-for="(notice, index) in allNotifications" :key="index" 
                 class="notification-item" :class="{unread: !notice.read}">
              <div class="notification-icon">
                <el-icon :color="notice.type === 'warning' ? '#e6a23c' : notice.type === 'error' ? '#f56c6c' : '#67c23a'">
                  <component :is="notice.icon"></component>
                </el-icon>
              </div>
              <div class="notification-content">
                <div class="notification-title">{{ notice.title }}</div>
                <div class="notification-desc">{{ notice.description }}</div>
                <div class="notification-time">{{ notice.time }}</div>
              </div>
              <div class="notification-action">
                <el-button v-if="!notice.read" size="small" @click="markNotificationAsRead(notice.id)">标记已读</el-button>
              </div>
            </div>
            <el-empty v-if="allNotifications.length === 0" description="暂无通知"></el-empty>
          </el-tab-pane>
          <el-tab-pane label="审核通知" name="audit">
            <!-- 审核通知内容 -->
          </el-tab-pane>
        </el-tabs>
      </div>
    </el-drawer>
  </div>
</template>

<script setup>
import { ref, onMounted, computed, watch } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import * as echarts from 'echarts'
import {
  User, Document, ChatDotRound, DataLine, Notebook,
  Odometer, Bell, ArrowDown, Warning, CircleCheck,
  CircleClose, InfoFilled, BellFilled, Setting,
  Edit, Plus, Delete, Search, Refresh
} from '@element-plus/icons-vue'

const router = useRouter()
const route = useRoute()

// 用户信息
const username = ref('')
const userAvatar = ref('')
const unreadNotifications = ref(3)
const currentDate = ref('')
const roleCode = ref(Number(localStorage.getItem('roleCode')) || 0)
const permissions = ref(JSON.parse(localStorage.getItem('permissions') || '[]'))


// 控制台数据
const dashboardData = ref({
  userCount: 12543,
  userTrend: 12.5,
  newsCount: 8765,
  newsTrend: 8.2,
  commentCount: 32456,
  commentTrend: -3.4,
  adCount: 342,
  adTrend: 23.1
})

// 图表数据
const chartTimeRange = ref('7')
let chartInstance = null

// 任务数据
const pendingTasks = ref([
  { id: 1, title: '关于人工智能的最新研究进展', author: '张研究员', time: '10分钟前' },
  { id: 2, title: '2023年全球气候变化报告', author: '李记者', time: '25分钟前' },
  { id: 3, title: '城市交通拥堵解决方案', author: '王专家', time: '1小时前' }
])

// 系统通知
const systemNotices = ref([
  { id: 1, title: '系统维护通知', description: '系统将于本周日凌晨2:00-4:00进行维护升级', type: 'warning', icon: BellFilled, time: '2023-05-15 14:30', read: false },
  { id: 2, title: '新版本发布', description: '系统v2.1.0版本已发布，请及时更新', type: 'info', icon: InfoFilled, time: '2023-05-14 09:15', read: true },
  { id: 3, title: '安全提醒', description: '检测到异常登录尝试，请检查账户安全', type: 'error', icon: Warning, time: '2023-05-13 18:45', read: false }
])

// 快捷操作
const quickActions = ref([
  { title: '发布新闻', icon: Plus, color: '#409EFF', path: '/apinews/add' },
  { title: '用户审核', icon: User, color: '#67C23A', path: '/apiusers/list' },
  { title: '广告管理', icon: DataLine, color: '#E6A23C', path: '/op/ad' },
  { title: '评论审核', icon: ChatDotRound, color: '#F56C6C', path: '/comments' },
  { title: '数据统计', icon: Search, color: '#909399', path: '/dashboard' },
  { title: '系统设置', icon: Setting, color: '#909399', path: '/settings' }
])

// 通知中心
const notificationDrawer = ref(false)
const notificationTab = ref('system')
const allNotifications = ref([
  ...systemNotices.value,
  { id: 4, title: '内容审核通过', description: '您提交的"科技新闻"已通过审核', type: 'info', icon: CircleCheck, time: '2023-05-15 10:20', read: false },
  { id: 5, title: '内容审核拒绝', description: '您提交的"体育新闻"未通过审核', type: 'error', icon: CircleClose, time: '2023-05-14 16:45', read: true }
])

// 面包屑导航
const breadcrumbList = computed(() => {
  const pathArr = route.path.split('/').filter(item => item)
  return pathArr.map(item => {
    const matchedRoute = route.matched.find(r => r.path === `/${item}`)
    return matchedRoute?.meta?.title || item
  })
})

// 初始化图表
const initChart = () => {
  const chartDom = document.getElementById('main-chart')
  if (!chartDom) return
  
  chartInstance = echarts.init(chartDom)
  const option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    legend: {
      data: ['用户数', '新闻数', '评论数', '广告数']
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      data: ['1日', '2日', '3日', '4日', '5日', '6日', '7日']
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        name: '用户数',
        type: 'line',
        data: [120, 132, 101, 134, 90, 230, 210],
        smooth: true,
        lineStyle: {
          width: 3,
          color: '#409EFF'
        },
        itemStyle: {
          color: '#409EFF'
        }
      },
      {
        name: '新闻数',
        type: 'line',
        data: [220, 182, 191, 234, 290, 330, 310],
        smooth: true,
        lineStyle: {
          width: 3,
          color: '#67C23A'
        },
        itemStyle: {
          color: '#67C23A'
        }
      },
      {
        name: '评论数',
        type: 'line',
        data: [150, 232, 201, 154, 190, 330, 410],
        smooth: true,
        lineStyle: {
          width: 3,
          color: '#E6A23C'
        },
        itemStyle: {
          color: '#E6A23C'
        }
      },
      {
        name: '广告数',
        type: 'line',
        data: [320, 332, 301, 334, 390, 330, 320],
        smooth: true,
        lineStyle: {
          width: 3,
          color: '#F56C6C'
        },
        itemStyle: {
          color: '#F56C6C'
        }
      }
    ]
  }
  chartInstance.setOption(option)
}

// 刷新图表数据
const refreshChart = () => {
  // 这里应该根据chartTimeRange的值从API获取数据
  // 模拟数据刷新
  if (chartInstance) {
    const option = chartInstance.getOption()
    option.series.forEach(series => {
      series.data = series.data.map(() => Math.round(Math.random() * 500))
    })
    chartInstance.setOption(option)
  }
}

// 任务操作
const approveTask = (id) => {
  // 调用API审核通过
  pendingTasks.value = pendingTasks.value.filter(task => task.id !== id)
}

const rejectTask = (id) => {
  // 调用API审核拒绝
  pendingTasks.value = pendingTasks.value.filter(task => task.id !== id)
}

const refreshTasks = () => {
  // 调用API刷新任务列表
}

// 通知操作
const showNotifications = () => {
  notificationDrawer.value = true
}

const markNotificationAsRead = (id) => {
  const notice = allNotifications.value.find(n => n.id === id)
  if (notice) {
    notice.read = true
    unreadNotifications.value = allNotifications.value.filter(n => !n.read).length
  }
}

const markAllAsRead = () => {
  allNotifications.value.forEach(notice => {
    notice.read = true
  })
  unreadNotifications.value = 0
}

// 用户操作
const showUserProfile = () => {
  router.push('/profile')
}

const handleLogout = () => {
  // 清除登录信息
  localStorage.removeItem('token')
  localStorage.removeItem('username')
  localStorage.removeItem('roleCode')
  localStorage.removeItem('userId')
  localStorage.removeItem('permissions')
  // 跳转到登录页
  router.push('/login')
}

// 快捷操作
const handleQuickAction = (path) => {
  router.push(path)
}

// 生命周期钩子
onMounted(() => {
  // 从 localStorage 获取用户名
  username.value = localStorage.getItem('username') || '超级管理员'
  // 初始化图表
  initChart()
  // 监听窗口大小变化，重新调整图表大小
  window.addEventListener('resize', () => {
    if (chartInstance) {
      chartInstance.resize()
    }
  })
})

// 监听图表时间范围变化
watch(chartTimeRange, () => {
  refreshChart()
})

// 组件卸载时销毁图表
// onUnmounted(() => {
//   if (chartInstance) {
//     chartInstance.dispose()
//   }
//   window.removeEventListener('resize', () => {})
// })
// 检查是否有权限
const hasPermission = (requiredPermissions) => {
  return requiredPermissions.some(permission => permissions.value.includes(permission))
}
onMounted(() => {
  // 从 localStorage 获取用户名
  username.value = localStorage.getItem('username') || '管理员'
  // 设置当前日期
  console.log('当前用户类型:', roleCode.value)
  console.log('当前权限:', permissions.value)
  const date = new Date()
  currentDate.value = date.toLocaleDateString('zh-CN', {
    year: 'numeric',
    month: 'long',
    day: 'numeric',
    weekday: 'long'
  })
})

</script>

<style scoped>
.home-container {
  height: 100vh;
  width: 100vw;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.header {
  height: 60px;
  background-color: #409EFF;
  color: white;
  padding: 0 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.system-title {
  font-size: 1.5rem;
  font-weight: 600;
}

.header-left, .header-right {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.welcome-text {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1rem;
  cursor: pointer;
}

.user-avatar {
  margin-right: 8px;
}

.notification-badge {
  margin-right: 10px;
}

.main-content {
  flex: 1;
  display: flex;
  overflow: hidden;
}

.sidebar {
  width: 220px;
  background-color: #001529;
  height: 100%;
  overflow-y: auto;
}

.nav-menu {
  border-right: none;
}

.el-menu-item {
  display: flex;
  align-items: center;
}

.el-menu-item .el-icon {
  margin-right: 8px;
  font-size: 18px;
}

.content {
  flex: 1;
  padding: 1.5rem;
  background-color: #f0f2f5;
  overflow-y: auto;
}

.breadcrumb {
  background-color: white;
  padding: 16px 24px;
  margin-bottom: 16px;
  border-radius: 4px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
}

/* 控制台样式 */
.dashboard-container {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* 数据概览卡片 */
.stat-card {
  margin-bottom: 20px;
  border-radius: 8px;
}

.card-content {
  display: flex;
  align-items: center;
}

.stat-icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 15px;
}

.stat-icon.user-icon {
  background-color: rgba(64, 158, 255, 0.1);
  color: #409EFF;
}

.stat-icon.news-icon {
  background-color: rgba(103, 194, 58, 0.1);
  color: #67C23A;
}

.stat-icon.comment-icon {
  background-color: rgba(230, 162, 60, 0.1);
  color: #E6A23C;
}

.stat-icon.ad-icon {
  background-color: rgba(245, 108, 108, 0.1);
  color: #F56C6C;
}

.stat-info {
  flex: 1;
}

.stat-title {
  font-size: 14px;
  color: #909399;
  margin-bottom: 5px;
}

.stat-value {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 5px;
}

.stat-trend {
  font-size: 12px;
  color: #909399;
}

.stat-trend .up {
  color: #67C23A;
}

.stat-trend .down {
  color: #F56C6C;
}

/* 卡片头部样式 */
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* 任务列表样式 */
.task-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.task-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px;
  background-color: #f9f9f9;
  border-radius: 4px;
}

.task-info {
  flex: 1;
}

.task-title {
  font-weight: 500;
  margin-bottom: 4px;
}

.task-meta {
  font-size: 12px;
  color: #909399;
  display: flex;
  gap: 10px;
}

.task-actions {
  display: flex;
  gap: 8px;
}

/* 通知列表样式 */
.notice-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.notice-item {
  display: flex;
  padding: 12px;
  background-color: #f9f9f9;
  border-radius: 4px;
  cursor: pointer;
}

.notice-item.unread {
  background-color: #f0f7ff;
}

.notice-icon {
  margin-right: 12px;
  font-size: 20px;
}

.notice-content {
  flex: 1;
}

.notice-title {
  font-weight: 500;
  margin-bottom: 4px;
}

.notice-desc {
  font-size: 13px;
  color: #606266;
  margin-bottom: 4px;
}

.notice-time {
  font-size: 12px;
  color: #909399;
}

/* 快捷操作样式 */
.quick-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.quick-action-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px 0;
  cursor: pointer;
  transition: all 0.3s;
  border-radius: 4px;
}

.quick-action-item:hover {
  background-color: #f5f7fa;
  transform: translateY(-3px);
}

.action-icon {
  margin-bottom: 10px;
}

.action-title {
  font-size: 14px;
}

/* 通知中心样式 */
.notification-container {
  padding: 20px;
}

.notification-item {
  display: flex;
  padding: 12px;
  margin-bottom: 10px;
  background-color: #f9f9f9;
  border-radius: 4px;
}

.notification-item.unread {
  background-color: #f0f7ff;
}

.notification-icon {
  margin-right: 12px;
  font-size: 20px;
}

.notification-content {
  flex: 1;
}

.notification-title {
  font-weight: 500;
  margin-bottom: 4px;
}

.notification-desc {
  font-size: 13px;
  color: #606266;
  margin-bottom: 4px;
}

.notification-time {
  font-size: 12px;
  color: #909399;
}

.notification-action {
  display: flex;
  align-items: center;
}

/* 自定义滚动条样式 */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: #555;
}
</style>